import React from 'react';
import MyECharts from '@components/my-echarts';
import PropTypes from 'prop-types';

const AllAlive = props => {
  const { allCount = 0, onClick, isDetecting } = props;

  const onClickChart = () => {
    if (typeof onClick === 'function' && !isDetecting) {
      onClick();
    }
  };

  const title = isDetecting ? '当前累计存活目标，正在探测中' : '累计存活目标';

  const option = {
    tooltip: {},
    xAxis: {
      type: 'category',
      axisTick: false,
      data: [title],
      axisLine: {
        lineStyle: {
          color: '#E6EAEF'
        }
      },
      axisLabel: {
        color: '#686C78',
        fontSize: 14,
        interval: 0
      }
    },
    color: ['#0B6FD6'],
    grid: { top: 25, right: 10, left: 10, bottom: 25 },
    yAxis: { show: false },
    series: [
      {
        type: 'bar',
        name: title,
        label: {
          show: true,
          position: 'top'
        },
        barMaxWidth: 64,
        data: [allCount]
      }
    ]
  };
  return <MyECharts option={option} onClick={onClickChart} />;
};

AllAlive.propTypes = {
  allCount: PropTypes.number,
  onClick: PropTypes.func,
  isDetecting: PropTypes.bool
};

export default AllAlive;
